@use "../../common.scss";

.player_bar {
  display: flex;
  flex: 0 0 auto;
  flex-flow: column;

  width: 100%;
  max-width: 100%;

  background: common.$background3;
  user-select: none;
  z-index: 10;

  .player_bar_bottom {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;

    & > .volume_controls_container {
      width: calc(50% - 65px);
    }
  }

  .track_duration {
    position: absolute;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;

    padding: 0 0.5em;
    height: 100%;
    width: 100%;
    z-index: 10;

    pointer-events: none;
  }
}

.volume_popup_container {
  display: flex;
  justify-content: flex-end;
  flex: 1 1 50%;
  padding-right: 1em;

  .volume_popup_button {
    background: transparent !important;
    color: common.$white !important;
  }
}

.volume_popup {
  position: relative !important;
  right: 1em !important;

  background: common.$bgdarker !important;
  border: 1px solid rgba(common.$bgdefault, 0.6) !important;
  box-shadow: 0rem 0.125rem 0.5rem 0.25rem rgba(common.$black, 0.1) !important;

  .volume_controls_container {
    padding: 0;
  }
}
